import React, { useEffect } from "react"
import { Tabs } from "antd-mobile"
import "./index.scss"
import NavTop from "../../components/NavTop"
import Kong from "../../assets/images/kong.png"
import { useDispatch, useSelector } from "react-redux"
import { getFollow } from "../../store/actions"
function Follow(props) {
  const dispatch = useDispatch()
  const text = props.match.params.text
  useEffect(() => {
    // 获取我的关注/粉丝
    dispatch(getFollow())
  }, [dispatch])

  const { follow } = useSelector((state) => state.my)
  const { results } = follow
  return (
    <div className="foll">
      <NavTop title="关注/粉丝"></NavTop>
      <Tabs defaultActiveKey={text}>
        <Tabs.Tab title="我的关注" key="follow">
          {results?.length === 0 ? (
            <div className="kong">
              <img src={Kong} alt=""></img>
              <p>暂无数据</p>
            </div>
          ) : (
            <div>
              {results?.map((item) => {
                return (
                  <div key={item.id} className="followItem">
                    <div className="item-left">
                      <img src={item.photo} alt=""></img>
                    </div>
                    <div className="item-content">
                      <p className="name">{item.name}</p>
                      <p className="fans">粉丝数 {item.fans_count}人</p>
                    </div>
                    <div className="item-right">
                      {item.mutual_follow ? "" : <button>取消关注</button>}
                    </div>
                  </div>
                )
              })}
              <div className="bottom">没有更多了</div>
            </div>
          )}
        </Tabs.Tab>
        <Tabs.Tab title="我的粉丝" key="fans">
          <div className="kong">
            <img src={Kong} alt=""></img>
            <p>暂无数据</p>
          </div>
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default Follow
